{extend name="user/base" /} {block name="main"}
<script src="/static/js/echarts.min.js"></script>
<div id="app">
  <el-row class="frontend-footer-brother" justify="center">
    <el-col class="user-layouts" :span="16" :xs="24">
      {include file="user/left" /}
      <el-main class="layout-main">
        <div class="user-views">
          <el-card class="user-views-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <span>{:__('Account information')}</span>
                <a
                  href="{:url('/account/profile')}"
                  class="el-button el-button--info is-plain"
                >
                  {:__('personal data')}
                </a>
              </div>
            </template>
            <div class="overview-userinfo">
              <div class="user-avatar">
                <img
                  src="{:full_url($user.avatar ? $user.avatar : '/static/images/avatar.png')}"
                  alt=""
                />
                <div class="user-avatar-icons">
                  <div class="avatar-icon-item">
                    <el-tooltip
                      effect="light"
                      placement="right"
                      content="{$user.mobile?__('Filled in').__('mobile'):__('Not filled in').__('mobile')}"
                    >
                      <i
                        class="fa fa-tablet icon {$user.mobile?'is-fill':''}"
                      ></i>
                    </el-tooltip>
                  </div>
                  <div class="avatar-icon-item">
                    <el-tooltip
                      effect="light"
                      placement="right"
                      content="{$user.email?__('Filled in').__('email'):__('Not filled in').__('email')}"
                    >
                      <i
                        class="fa fa-envelope-square icon {$user.email?'is-fill':''}"
                      ></i>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="user-data">
                <div class="welcome-words">{$user.nickname}</div>
                <el-row class="data-item">
                  <el-col :span="4">{:__('Integral')}</el-col>
                  <el-col :span="8">
                    <el-link href="/account/integral" type="primary">
                      {$user.score}
                    </el-link>
                  </el-col>
                  <el-col :span="4">{:__('Balance')}</el-col>
                  <el-col :span="8">
                    <el-link href="/account/balance" type="primary">
                      {$user.money}
                    </el-link>
                  </el-col>
                </el-row>
                <el-row class="data-item">
                  <el-col class="lastlogin title" :span="4">
                    {:__('Last login')}
                  </el-col>
                  <el-col class="lastlogin value" :span="8">
                    {$user.last_login_time |date="Y-m-d H:i:s"}
                  </el-col>
                  <el-col class="lastip" :span="4">
                    {:__('Last login IP')}
                  </el-col>
                  <el-col class="lastip" :span="8">
                    {$user.last_login_ip}
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>

          <el-card
            class="user-views-card"
            shadow="hover"
            header="{:__('Growth statistics')}"
          >
            <div class="account-growth" ref="accountGrowthChartRef"></div>
          </el-card>
        </div>
      </el-main>
    </el-col>
  </el-row>
</div>

<script>
  const App = {
    setup() {
      const { ref, reactive } = Vue;
      const accountGrowthChartRef = ref();
      const state = reactive({
        days: [],
        score: [],
        money: [],
        charts: [],
      });
      const initUserGrowthChart = () => {
        const userGrowthChart = echarts.init(accountGrowthChartRef.value);
        const option = {
          grid: {
            top: 10,
            right: 0,
            bottom: 20,
            left: 50,
          },
          xAxis: {
            data: state.days,
          },
          yAxis: {},
          legend: {
            data: ["{:__('Integral')}", "{:__('Balance')}"],
          },
          series: [
            {
              name: "{:__('Integral')}",
              data: state.score,
              type: "line",
              smooth: true,
              show: false,
              color: "#f56c6c",
              emphasis: {
                label: {
                  show: true,
                },
              },
              areaStyle: {},
            },
            {
              name: "{:__('Balance')}",
              data: state.money,
              type: "line",
              smooth: true,
              show: false,
              color: "#409eff",
              emphasis: {
                label: {
                  show: true,
                },
              },
              areaStyle: {
                opacity: 0.4,
              },
            },
          ],
        };
        userGrowthChart.setOption(option);
        state.charts.push(userGrowthChart);
      };

      createAxios({
        url: "/user/accountGrowth",
        method: "get",
      }).then((res) => {
        state.days = res.data.days;
        state.score = res.data.score;
        state.money = res.data.money;
        initUserGrowthChart();
      });
      return {
        accountGrowthChartRef,
      };
    },
  };
  const app = Vue.createApp(App);
  app.use(ElementPlus);
  app.mount("#app");
</script>
{/block}
